import React, { Component } from "react";
import { Input, Button, Icon } from "antd";
import { connect } from "dva";
import styles from "./Ads.less";

@connect(stores => ({
  apidata: stores.adddataSource
}))
class Ads extends Component {
  state = {
    tbIName: "",
    through: false,
    AllControl: false
  };

  componentDidMount() {
    setTimeout(() => {
      const { dataDetail = {}, operate = "add" } = this.props;
      if (operate === "mod" && dataDetail && dataDetail.dsType === 2) {
        this.setState(
          {
            tbIName: dataDetail.adsTableName
          },
          () => {
            const { getValue } = this.props;
            const tmp = [{ tbIName: this.state.tbIName }];
            getValue(tmp, this.state.AllControl, this.state.through);
          }
        );
      }
    }, 700);
  }

  tbIset = e => {
    this.setState(
      {
        tbIName: e.target.value,
        through: false,
        AllControl: false
      },
      () => {
        const { getValue } = this.props;
        const tmp = [{ tbIName: this.state.tbIName }];
        getValue(tmp, this.state.AllControl, this.state.through);
      }
    );
  };

  test = () => {
    const { getValue, dispatch } = this.props;
    if (this.state.tbIName === "") {
      this.setState({
        tbIvisible: true
      });
    } else {
      dispatch({
        type: "adddataSource/testConnect",
        payload: {
          dsType: 2,
          adsTableName: this.state.tbIName
        }
      }).then(() => {
        const { apidata } = this.props;
        const { testErr = false } = apidata;
        if (testErr) {
          this.setState(
            {
              through: true,
              AllControl: true
            },
            () => {
              const tmp = [{ tbIName: this.state.tbIName }];
              getValue(tmp, this.state.AllControl, this.state.through);
            }
          );
        } else {
          this.setState(
            {
              through: false,
              AllControl: true
            },
            () => {
              const tmp = [{ tbIName: this.state.tbIName }];
              getValue(tmp, this.state.AllControl, this.state.through);
            }
          );
        }
      });
    }
  };

  renderSuffix = () =>
    this.state.through ? (
      <Icon type="check-circle" style={{ color: "#52C41A" }} />
    ) : (
      <Icon type="close-circle" style={{ color: "#e23c39" }} />
    );

  render() {
    const { tbIName } = this.state;
    const { param, editable } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.title}>数据配置</div>
        <div className={styles.info}>
          <div className={styles.choice1}>
            <span className={styles.star}>*</span>tbIName：
            <Input
              className={styles.notEmpty}
              placeholder="请输入URL"
              onChange={this.tbIset}
              suffix={this.state.AllControl ? this.renderSuffix() : null}
              value={tbIName}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div
            style={{
              width: 466,
              marginLeft: 90,
              marginTop: 8,
              marginBottom: 24
            }}
          >
            <Button
              type="primary"
              onClick={this.test}
              style={{ backgroundColor: this.state.through ? "#52C41A" : "" }}
              disabled={param[0] === "" || param[1] === "" || tbIName === ""}
            >
              {this.state.through ? "测试通过" : "连通测试"}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default Ads;
